| 實作 project

• 連結 | Android 專案
  • @commit faba979

| RecyclerView

• TODO LIST

• 聊天室界面

  • 

| 前言概念

• 前面已經學到了，如何畫出一個聊天泡泡，以及增加小鍵盤消失的使用者體驗。在這篇將會提到，如何結合 recyclerView 去達到聊天室的畫面。

  簡單來講，我的 data-class 裡面記載著是誰傳的，以及傳的訊息內容，而我的 recyclerView 就依照是誰傳的的資訊，去判斷出現在應該要使用哪個 background ，因為不同的 background 可以反應出現在是 bot 還是 user。

| 實作概念

• 做出一個 data-class

  class chatMsg{
      @Parcelize
      data class Data(val from: String, val msg: String?): Parcelable
  }
  

  裡頭包含了誰傳的，以及要傳出去的訊息文字。

• 做出兩個 view holder 的 layout

  • 
  • 
    以上兩個 viewHolder 可以由前篇的背景概念做出來，也可以參考上面附的程式碼唷！

• 回傳相對應的 viewHolder

  當把想要的 layout 建出來之後，就是在對的時間做回傳啦！我是透過getItemViewType 先去設定現在的 item 應該要為哪個 type，接著在 onCreateViewHolder 接收 type，並且回傳正確的 viewHolder 回去，就會看到一左一右的聊天泡泡出現囉！

  override fun getItemViewType(position: Int): Int {
      if(msgList[position].from == "bot"){
          return BOT
      }else if(msgList[position].from == "user"){
          return USER
      }
      return super.getItemViewType(position)
  }
  

  override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): MyViewHolder {
      val viewBot = LayoutInflater.from(viewGroup.context).inflate(R.layout._5_bot_msg, viewGroup, false)
      val viewUser = LayoutInflater.from(viewGroup.context).inflate(R.layout._5_user_msg, viewGroup, false)
      if(viewType == BOT)
          return MyViewHolder(viewBot)
      else if(viewType == USER)
          return MyViewHolder(viewUser)
      return MyViewHolder(viewBot)
  }
  

• User 新增訊息
  設定該則訊息是 from user，並且記得一定要 update，這個 update 就是自己寫好的 notifyDataSetChanged()，這樣新的資料才會秀在畫面上！
  我還有做一點增加使用者體驗的部分，就是當按下送出之後，聊天頁面自動滾動到最下面的位置，也就是剛剛新送出去的訊息，是透過 smoothScrollToPosition 達到這效果的。

  viewRoom.sendBtn.setOnTouchListener { view, motionEvent ->
     if(viewRoom.texting.text.toString() != "") {
         msgList.add(chatMsg.Data("user", viewRoom.texting.text.toString()))
         chatAdapter.update(msgList)
         viewRoom.chatRoom.smoothScrollToPosition(msgList.size-1)
         viewRoom.texting.text.clear()
     }
     return@setOnTouchListener false
  }